<template>
  <div id="big_box">
    <ul id="left_router">
      <li @click="add('首页','/Index',1);toggleClass(1)" :class="{'active':1==current}">
        <router-link :to="{path: '/Index',name:'Index',params:{indexs:1}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon shouye"></i></div>
          <span class="router_title">首页</span>
        </router-link>
      </li>
      <li @click="toggleClass(2)" :class="{'active':2==current}">
        <div class="router">
          <div class="left_logo"><i class="inlineBlockIcon qiye"></i></div>
          <span class="router_title">企业管理</span>
          <i class="inlineBlockIcon jiantou"></i>
        </div>
        <ul class="zi_list">
          <li @click.stop="add('企业管理','/BusinessManagement',2.1);toggleBoxClass(2.1)" :class="{'active':2.1==BoxCurrent}">
            <router-link :to="{path: '/BusinessManagement',name:'BusinessManagement',params:{indexs: 2.1}}" class="router">
              <span class="router_title">企业管理</span>
            </router-link>
          </li>
          <li @click.stop="add('人员管理','/PeopleManagement',2.2);toggleBoxClass(2.2)" :class="{'active':2.2==BoxCurrent}">
            <router-link :to="{path: '/PeopleManagement',name:'PeopleManagement',params:{indexs: 2.2}}" class="router">
              <span class="router_title">人员管理</span>
            </router-link>
          </li>
        </ul>
      </li>
      <li @click="add('研发活动管理');toggleClass(3)" :class="{'active':3==current}">
        <router-link :to="{path: '/index1',name: 'index1', params: {ids: 'index1'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon yanfahuodong"></i></div>
          <span class="router_title">研发活动管理</span>
        </router-link>
      </li>
      <li @click="toggleClass(4)" :class="{'active':4==current}">
        <!--<div>研发费用管理</div>-->
        <div class="router">
          <div class="left_logo"><i class="inlineBlockIcon feiyong"></i></div>
          <span class="router_title">研发费用管理</span>
          <i class="inlineBlockIcon jiantou"></i>
        </div>

      </li>
      <li @click="add('知识产权');toggleClass(5)" :class="{'active':5==current}">
        <router-link :to="{path: '/index1',name: 'index1', params: {ids: 'index1'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon zhishichanquan"></i></div>
          <span class="router_title">知识产权</span>
        </router-link>
      </li>
      <li @click="add('高新技术产品服务');toggleClass(6)" :class="{'active':6==current}">
        <router-link :to="{path: '/index1',name: 'index1', params: {ids: 'index1'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon gaoxinjishu"></i></div>
          <span class="router_title">高新技术产品服务</span>
        </router-link>
      </li>
      <li @click="add('创新能力管理');toggleClass(7)" :class="{'active':7==current}">
        <router-link :to="{path: '/index1',name: 'index1', params: {ids: 'index1'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon chuangxin"></i></div>
          <span class="router_title">创新能力管理</span>
        </router-link>
      </li>
      <li @click="add('标准制定管理');toggleClass(8)" :class="{'active':8==current}">
        <router-link :to="{path: '/index1',name: 'index1', params: {ids: 'index1'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon biaozhun"></i></div>
          <span class="router_title">标准制定管理</span>
        </router-link>
      </li>
      <li @click="add('企业成长性','index');toggleClass(9)" :class="{'active':9==current}">
        <router-link :to="{path: '/index1',name: 'index1', params: {ids: 'index1'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon chengzhang"></i></div>
          <span class="router_title">企业成长性</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import bus from '../assets/eventBus'
  export default {
    name: 'routerLeft',
    data () {
      return {
        routerList:[],
        current:this.$store.state.routerCurrent,
        BoxCurrent:this.$store.state.BoxCurrent
      }
    },
    mounted () {
      let that = this
      bus.$on('routes',function(data){
        that.routerList = data
      })
    },
    methods: {
      add (name,path,index) {
        let obj = {
          name:name,
          path:path,
          index:index
        }
        bus.$emit('route',obj)
      },
      toggleClass (index) {
        this.current = index
        this.$store.commit('routerCurrent',index)
        this.$store.commit('currentIndex',index)
      },
      toggleBoxClass (index) {
        this.BoxCurrent = index
        this.$store.commit('BoxCurrent',index)
        this.$store.commit('currentIndex',index)
      }
    }
  }
</script>

<style scoped>
  @import '../assets/public.css';
  #big_box{
    width:285px;
    height:100vh;
    overflow: hidden;
    /*margin-bottom: 100px;*/
  }
  #left_router{
    height:100%;
    background-color: #F3F3F3;
    width:300px;
    border-right:1px solid #ddd;
    overflow-y: scroll;
    /*padding-bottom:10px;*/
  }
  ::-webkit-scrollbar{
    display: none;
  }
  #left_router>li{
    /*height:62px;*/
    overflow: hidden;
  }
  #left_router>li>ul{
    display: none;
  }
  #left_router>li.active>ul{
    display: block;
  }
  .left_logo{
    display: inline-block;
    width:22px;
    text-align: center;
    margin:0 30px;
  }
  .router{
    width:100%;
    /*height:100%;*/
    height:62px;
    display: flex;
    align-items: center;
    border-bottom:1px solid #ddd;
    position: relative;
    box-sizing:border-box;
    cursor: pointer;
  }

  .router_title{
    color: #666;
    font-size:18px;
  }
  li.active>.router>.router_title{
    color: #3C7FAF;
  }
  li.active>.router{
    background-color: #D6EBFC;
  }
  .jiantou{
    width: 8px;
    height: 15px;
    background: url("img/jiantou.png");
    position: absolute;
    right:39px;
    top:50%;
    transform: translateY(-50%) rotate(0deg);
  }
  li.active .jiantou{
    transform: translateY(-50%) rotate(90deg);
  }
  .zi_list .router{
    height:46px;
    padding-left: 95px;
    color: #666;
    font-size:16px;
  }
  /****logo那些*****/
  .shouye{
    width:21px;
    height:21px;
    background: url("img/shouye2.png");
  }
  li.active .shouye{
    background: url("img/shouye1.png");
  }
  .qiye{
    width:18px;
    height:17px;
    background: url("img/qiye2.png");
  }
  li.active .qiye{
    background: url("img/qiye1.png");
  }
  .yanfahuodong{
    width:20px;
    height:20px;
    background: url("img/yanfahuodong2.png");
  }
  li.active .yanfahuodong{
    background: url("img/yanfahuodong1.png");
  }
  .feiyong{
    width:20px;
    height:20px;
    background: url("img/feiyong2.png");
  }
  li.active .feiyong{
    background: url("img/feiyong1.png");
  }
  .zhishichanquan{
    width:20px;
    height:18px;
    background: url("img/zhishichanquan2.png");
  }
  li.active .zhishichanquan{
    background: url("img/zhishichanquan1.png");
  }
  .gaoxinjishu{
    width:21px;
    height:18px;
    background: url("img/gaoxinjishu2.png");
  }
  li.active .gaoxinjishu{
    background: url("img/gaoxinjishu1.png");
  }
  .chuangxin{
    width:22px;
    height:20px;
    background: url("img/chuangxin2.png");
  }
  li.active .chuangxin{
    background: url("img/chuangxin1.png");
  }
  .biaozhun{
    width:20px;
    height:15px;
    background: url("img/biaozhun2.png");
  }
  li.active .biaozhun{
    background: url("img/biaozhun1.png");
  }
  .chengzhang{
    width:19px;
    height:16px;
    background: url("img/chengzhang2.png");
  }
  li.active .chengzhang{
    background: url("img/chengzhang1.png");
  }
  /****************/
</style>
